<template>
    <div class="an-search">
        <van-sticky>
            <van-search
                v-model="getData.name"
                autofocus
                show-action
                shape="round"
                placeholder="请输入搜索关键词"
                @search="onSearch"
                @cancel="clickBack"
                />
        </van-sticky>
        <van-list
            class="an-list"
            v-if="list.length>0"
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
            <goods-list v-for="item in list" :key="item.id" :goods="item" class="an-item"></goods-list>
        </van-list>
        <van-empty v-else image="search" description="暂无数据" />

    </div>
</template>

<script>
import GoodsList from "@/components/GoodsCard/GoodsList.vue";
export default {
  components:{
    GoodsList
  },
  data() {
    return{
      list: [],
      loading: false,
      finished: false,
      getData:{
        name:'',
        page:1,
        pageSize:10,
        state:1 // 上架的商品
      },
      total:0 // 总条数
    };
  },
  methods:{
    // 查询商品列表
    getGoodsList(page) {
      if(page) {
        this.getData.page = page;
      }
      if(page == 1) {
        this.list = [];
      }
      let nd = Object.assign(this.getData);
      this.$api.goodsList(nd).then(res => {
        this.loading = false;
        this.list = [...this.list, ...res.records];
        this.total = res.total;
        // 判断是否存在下一页数据
        if(this.total <= this.getData.page * this.getData.pageSize) {
          this.finished = true;
        }
      });
    },

    // 上拉加载
    onLoad() {
      let page = this.getData.page;
      page++;
      if(this.total > this.getData.page * this.getData.pageSize) {
        this.getGoodsList(page);
      }
    },

    // 搜索
    onSearch() {
      this.getGoodsList(1);
    },
    // 后退
    clickBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.an-search{
    .an-list{
        padding: 15px;
        background-color: #ffffff;
        .an-item{
            margin-bottom: 15px;
        }
    }
}

</style>